<template>
	<div class="addressList">
		<div class="lz-header">
			<div
				style="display: flex;margin-bottom: 10px;align-items: center;flex-wrap: wrap;">
				<div style="margin-right: 10px;">
					<el-button type="primary" icon="el-icon-circle-plus-outline" :size="size" @click="customerAdd()">添加
					</el-button>
				</div>
				<div>
					<el-button type="primary" icon="el-icon-circle-plus-outline" :disabled="table.selectList.length==0" :size="size" @click="customerDelete()">删除
					</el-button>
				</div>
			</div>
		</div>
		<el-table :data="table.list" border :size="size" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" ></el-table-column>
			<el-table-column prop="siteNo" label="地点编号" width="160"  sortable>
				<template slot-scope="scope">
					<el-select v-model="scope.row.siteNo" placeholder="请选择" :size="size"
						clearable :disabled="computeInputBox('siteNo','disabled')" style="width: 100%;">
						<el-option v-for="item in siteNoList" :key="item.id" :label="item.siteName"
							:value="item.siteNo"></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="supplierNo" label="供应商编号" width="160"  sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.supplierNo" @focus="focusFn(scope.row)" placeholder="选取供应商编号" :size="size" class="lz-placeholder-color"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="supplierCname" label="供应商名称" width="160"  sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.supplierCname" :size="size" disabled></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="averagePrice" label="移动平均价" show-overflow-tooltip  width="120" sortable>
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.averagePrice" :min="0" :size="size" style="width: 100%;" :max="99999999" :precision="2" ></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="standardPrice" label="标准价" show-overflow-tooltip  width="120" sortable>
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.standardPrice" :min="0" :size="size" style="width: 100%;" :max="99999999" :precision="2" ></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="purchasePrice" label="采购价" show-overflow-tooltip  width="120" sortable>
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.purchasePrice" :min="0" :size="size" style="width: 100%;" :max="99999999" :precision="2"></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="purchaseDays" label="采购天数" show-overflow-tooltip  sortable width="120">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.purchaseDays" :min="0" :max="99999999" :size="size" style="width: 100%;" ></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="miniPurchaseQuantity" label="采购最小起订量" show-overflow-tooltip  width="140" sortable>
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.miniPurchaseQuantity" :min="0" :max="99999999" :precision="2" :size="size" style="width: 100%;" ></el-input-number>
				</template>
			</el-table-column>
		</el-table>
		<!-- 供应商列表-->
		<SupplierNumber @submit="bindConfiguration" ref="SupplierNumber"></SupplierNumber>
	</div>
</template>

<script>
	let that;
	import {
		mapGetters
	} from 'vuex';
	import lzRowCol from '@/components/lzRowCol/lzRowCol';
	// 供应商列表
	import SupplierNumber from '@/components/SupplierNumber/SupplierNumber'
	export default {
		components: {SupplierNumber},
		name: 'addressList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api', 'headerCellStyle', 'InputBoxList']),
			//计算出当前输入框配置信息
			computeInputBox() {
				return (field, type) => {
					let arr = this.InputBoxList.find(item => item.fieldName == field)
					if (arr && type == 'show') {
						return arr.isVisible == 0 ? true : false //0为显示1为隐藏
					}
					if (arr && type == 'isInput') {
						return arr.isInput == 0 ? field : '' //0为必填1为不必填
					}
					if (arr && type == 'disabled') {
						return arr.isDisplay == 0 ? true : false //0为只读1为可读写
					}
					if (arr && type == 'label') {
						return arr.fieldLabel //标签动态显示名称
					}
					return false
				}
			}
		},
		data() {
			return {
				//表格数据
				table: {
					list: [],
					selectList: [], //多选
					focusRow:'',//当前获取光标是行的信息
				},
				siteNoList:[],//地点编号列表
			};
		},
		watch:{
			'table.list':{
				handler:function(newV,oldV){
					this.$emit('updataDataAddressList', newV)
				},
				deep:true
			}
		},
		mounted() {
			that = this;
			//获取地点编号列表
			that.site_list()
		},
		methods: {
			async SeeRuleForm(row){
				//获取地点编号列表
				await that.site_list()
				that.table.list=row.materialSiteList
			},
			//获取地点编号列表
			site_list(){
				return new Promise((result,reject)=>{
					that.GLOBAL.doGet(that.api.GLOBAL_setting_site_list, {}, function(res) {
						if (res.code == 200) {
							that.siteNoList=res.result
							result()
						}
					});
				})
			},
			//获取到光标
			focusFn(row) {
				that.table.focusRow=row
				that.$refs.SupplierNumber.focusFn()
			},
			//弹框确定
			bindConfiguration(data) {
				//找到之前获取光标的那一行信息，进行赋值
				that.table.list=that.table.list.map(item=>{
					if(item.id==that.table.focusRow.id){
						item.supplierNo=data.supplierNo
						item.supplierCname=data.supplierCname
					}
					return item
				})
			},
			//删除
			customerDelete(){
				that.table.selectList.forEach(res=>{
					that.table.list=that.table.list.filter(item=>{
						return item.id!=res.id
					})
				})
			},
			// 多选
			handleSelectionChange(val) {
				that.table.selectList=val
			},
			//添加操作
			customerAdd(text, event) {
				that.table.list.push({
					id:that.$lizhao.guid(),//全局唯一ID
					siteNo: '', //地点编号
					supplierNo: '', //供应商编号
					purchasePrice: '', //采购价
					purchaseDays: '', //采购天数
					miniPurchaseQuantity: '', //采购最小起订量MPQ
					averagePrice: '', //移动平均价
					standardPrice: '', //标准价
				})
			},
			//重置
			Reset() {
				that.table.list = [{
					id:that.$lizhao.guid(),//全局唯一ID
					siteNo: '', //地点编号
					supplierNo: '', //供应商编号
					purchasePrice: '', //采购价
					purchaseDays: '', //采购天数
					miniPurchaseQuantity: '', //采购最小起订量MPQ
					averagePrice: '', //移动平均价
					standardPrice: '', //标准价
				}]
				
			}

		}
	};
</script>

<style lang="scss" scoped>
	.addressList {
		.lz-header {}

		.el-pagination {
			float: right;
			margin: 10px 0;
		}
	}
</style>
